<MudCard Style="height: calc(100vh - 158px)" Class="rounded-lg d-flex justify-center flex-column">
    <MudCardHeader Class="order-0">
        <CardHeaderAvatar>
            <MudIcon Icon="@Icons.Material.Filled.Apps" />
        </CardHeaderAvatar>
        <CardHeaderContent>
            <MudText Typo="Typo.h6">Steps</MudText>
        </CardHeaderContent>
    </MudCardHeader>
    <MudCardContent style="height: calc(100% - 75px)" class="pt-0 mt-0 order-1">
        <MudTextField T="string" Label="Search" TextChanged="@OnSearchTextChanged"
                        Variant="Variant.Filled" Adornment="Adornment.End"
                        AdornmentIcon="@Icons.Material.Filled.Search" Clearable="true"
                        Immediate="true" Class="mt-3" />
        <MudSelect T="string" Label="Category" SelectedValues="_selectedCategories"
                    SelectedValuesChanged="@OnSelectedCategoryChanged">
            @foreach (var category in _availableCategories)
            {
                <MudSelectItem T="string" value="@category.Key">
                    <MudBadge Content="@category.Value" Origin="Origin.CenterRight" Color="Color.Primary">
                        <MudText Class="mr-4">
                            @category.Key
                        </MudText>
                    </MudBadge>
                </MudSelectItem>
            }
        </MudSelect>
        <MudList Clickable="true" style="height: calc(100% - 115px)" class="overflow-auto">
            <MudListSubheader>
                Drag & drop to the automation flow
            </MudListSubheader>
            @foreach (var step in @_filteredSteps)
            {
                <MudListItem Icon="@Icons.Material.Filled.DragIndicator" IconColor="Color.Primary" draggable="true"
                @ondragstart="(args) => OnDragStart(args, step)">
                    <MudTooltip Text="@step.Name">
                        <MudText>@step.Name</MudText>
                    </MudTooltip>
                </MudListItem>
            }
        </MudList>
    </MudCardContent>
</MudCard>
